<template>
  <div class="page_padding">
    <MyNavBar :title="title" @goback="goback" />
    <div class="switch_title">
      <van-dropdown-menu class="switch_title-search">
        <van-dropdown-item
          @change="oneChange"
          title-class="time_title"
          v-model="selectData.selectOne"
          :options="typeList1" />
      </van-dropdown-menu>
      <van-dropdown-menu class="switch_title-search">
        <van-dropdown-item
          @change="twoChange"
          title-class="time_title"
          v-model="selectData.selectTwo"
          :options="typeList2" />
      </van-dropdown-menu>
      <p class="search-icon" @click="showSearchCli" v-if="!showSearch">
        <van-icon name="search" />
      </p>
    </div>
    <div class="search" v-if="showSearch">
      <van-search
        v-model="selectData.searchValue"
        clearable
        @clear="clearData"
        show-action
        placeholder="搜索"
        @click-left-icon="onSearch">
        <template #action>
          <div @click="noSearchCli">取消</div>
        </template>
      </van-search>
    </div>
    <div class="content">
      <!-- <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="getNeedDeals"> -->
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" v-if="eventList.length > 0">
        <div class="event_list" v-for="item in eventList" :key="item.needDealId" @click="goDetail(item)">
          <div class="event_list_info">
            <div class="event_list_info_title">
              {{ item.needDealName }}
            </div>
            <div class="event_list_info_label">
              <span class="event_label">{{ item.busSign }}</span>
              <span class="event_label_back" v-if="item.tags">{{ item.tags }}</span>
              <span class="event_time" v-if="['01-01', '01-02', '01-03'].includes(item.busSignId)">
                {{ item.showStartTime }}
                <span>-</span>
                {{ item.showEndTime }}
              </span>
              <span class="event_time" v-else>
                {{ item.showStartTime }}
              </span>
            </div>
          </div>
          <div class="iconfont icon-yiwancheng"></div>
        </div>
      </van-list>
      <van-empty description="暂无数据" v-else></van-empty>
    </div>
  </div>
</template>

<script>
import MyNavBar from '@com/MyNavBar'
import { listNeedDealsByParam, getlistNeedDealTypes } from '@api/api.js'
export default {
  name: 'EventsHandled',
  components: { MyNavBar },
  props: {},
  data() {
    return {
      title: '已办事项', // 待办变量
      eventList: [],
      currentPage: '1',
      pageSize: 1000,
      eventListTotal: 0,
      loading: false,
      finished: false,
      typeList1: [],
      typeList2: [],
      selectData: {
        selectOne: '0',
        selectTwo: '0',
        quartYM: '',
        searchValue: '',
      },
      showSearch: false,
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    // this.getNeedDeals()
    this.initData()
  },
  methods: {
    goback() {
      this.$router.go(-1)
    },
    goHome() {
      this.$router.go(-1)
    },
    // 获取待办列表方法
    getNeedDeals() {
      listNeedDealsByParam({
        currentPage: this.currentPage,
        pageSize: this.pageSize,
        param: {
          parentCode: this.selectData.selectOne,
          code: this.selectData.selectTwo,
          kw: this.selectData.searchValue,
          status: '1',
          userId: localStorage.userId,
          year: this.selectData.quartYM,
        },
      }).then(res => {
        this.eventList.push(...res.data.content)
        this.eventListTotal = res.data.totalSize
        this.currentPage++
        if (this.eventList.length === this.eventListTotal) {
          this.finished = true
        }
      })
    },
    goDetail(item) {
      this.$store.state.alive = true
      this.$router.push({
        path: item.url,
        query: {
          isEnd: true,
          needDealStatus: item.needDealStatus,
        },
      })
    },
    initData() {
      getlistNeedDealTypes({
        year: '',
        status: '1',
        userId: localStorage.userId,
      }).then(res => {
        this.typeList1 = res.data
        if (res.data.length) {
          this.selectData.selectOne = this.typeList1[0].value
          this.typeList2 = [...this.typeList1[0].selectList]
          this.selectData.selectTwo = this.typeList2[0].value
          this.getNeedDeals()
        }
      })
    },
    oneChange() {
      for (const i in this.typeList1) {
        if (this.typeList1[i].value === this.selectData.selectOne) {
          this.typeList2 = [...this.typeList1[i].selectList]
          this.selectData.selectTwo = this.typeList2[0].value
          break
        }
      }
      this.currentPage = 1
      this.eventList = []
      this.getNeedDeals()
    },
    twoChange() {
      this.currentPage = 1
      this.eventList = []
      this.getNeedDeals()
    },
    showSearchCli() {
      this.currentPage = 1
      this.showSearch = true
      this.selectData.searchValue = ''
    },
    noSearchCli() {
      this.showSearch = false
      this.selectData.searchValue = ''
      this.currentPage = 1
      this.eventList = []
      this.getNeedDeals()
    },
    clearData() {
      this.selectData.searchValue = ''
      this.currentPage = 1
      this.eventList = []
      this.getNeedDeals()
    },
    onSearch() {
      this.currentPage = 1
      this.eventList = []
      this.getNeedDeals()
    },
  },
}
</script>

<style lang="scss" scoped>
.switch_title {
  display: flex;
  // justify-content: space-between;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  background-color: #f4f6f8;
  position: relative;
  /deep/.van-dropdown-menu {
    .van-dropdown-menu__bar {
      height: 36px;
      background-color: transparent;
      box-shadow: none;
      .time_title {
        font-size: 13px;
        color: #333333;
      }
    }
    .van-popup--top {
      position: absolute;
    }
    .van-dropdown-item {
      position: absolute;
      top: 36px !important;
      height: 500px;
      width: 100%;
      .van-dropdown-item__content {
        max-height: 50%;
      }
    }
  }
  .switch_type {
    height: 100%;
    width: 30px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    .iconfont {
      font-size: 16px;
      color: #333;
    }
  }
  .search-icon {
    margin-top: 6px;
    font-size: 19px;
    color: #2081e3;
    width: 20%;
    text-align: right;
  }
}
.switch_title-search {
  width: 40%;
  display: flex;
  justify-content: flex-start;
}

// 搜索框
.search {
  padding: 0 16px;
  margin-top: 8px;
  /deep/.van-search {
    background-color: transparent;
    .van-search__content {
      background-color: #ffffff;
      padding: 0 5px;
      border-radius: 3px;
      border: 1px solid #ececec;
    }
    .van-search__action {
      text-align: center;
      margin-left: 8px;
      background-color: #ffffff;
      color: #56462c;
      // background-color: #0F61D5;
      // border-radius: 3px;
    }
  }
}
.content {
  padding: 0 16px;
  // height: 100%;
  .event_list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 12px;
    border-bottom: solid 1px #efefef;
    .event_list_info {
      width: calc(100% - 110px);
      display: flex;
      flex-direction: column;
      .event_list_info_title {
        font-size: 13px;
        color: #333333;
        height: 26px;
        line-height: 26px;
        margin-bottom: 5px;
        @include ellipsis;
      }

      .event_list_info_label {
        color: #999999;
        display: flex;
        align-items: center;

        .event_label {
          background-color: #fdeed7;
          border-radius: 4px;
          padding: 3px 8px;
          font-size: 12px;
          color: #a57d60;
        }

        .event_time {
          font-size: 12px;
          padding-left: 6px;
          margin-left: 6px;
          border-left: 1px solid #999999;
        }
        .event_label_back {
          background-color: #d9001b;
          border-radius: 4px;
          padding: 3px 8px;
          font-size: 12px;
          color: #fff;
          margin-left: 6px;
        }
      }
    }

    .iconfont {
      font-size: 40px;
      color: #666666;
    }
  }
  .my_empty {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    .bottom-button {
      width: 400px;
      height: 100px;
    }
  }
}
</style>
